import { Flex, Tag, TagLabel, TagLeftIcon } from '@chakra-ui/react';
import { SegmentedControl } from '@mantine/core';

import { useTranslation } from 'react-i18next';

import {
  FaCheck,
  //   FaPlus,
  //   FaSortAmountDown,
  //   FaSortAmountUpAlt,
  FaTags,
  FaTimes,
  //   FaUndoAlt,
} from 'react-icons/fa';

import IAIButton from '@/common/components/IAIButton';
import IAIMantineSelect from '@/common/components/IAIMantineSelect';
import IAIPopover from '@/common/components/IAIPopover';

import { useAppDispatch, useAppSelector } from '@/store/hooks';
import {
  //   setClearImageFilter,
  setImageFilterClassId,
  setImageFilterIsCollect,
  setImageFilterTagId,
} from '@/store/user';
export default function ImageFilter() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  //   const [oldFirst, setOldFirst] = useState<boolean>(true);
  const {
    collectionCategory = [],
    collectionTag = [],
    imageFilterClassId,
    imageFilterIsCollect,
    imageFilterTagIds,
  } = useAppSelector((state) => state.user);

  return (
    <Flex py="2" direction="column" gap="2">
      <Flex align="center" justify="space-between">
        <Flex gap="2" align="center">
          <SegmentedControl
            size="xs"
            value={imageFilterIsCollect}
            data={[
              {
                value: '',
                label: t('profile.allImages'),
              },
              {
                value: '1',
                label: t('profile.favoredImages'),
              },
            ]}
            styles={() => ({
              root: {
                overflow: 'initial',
                backgroundColor: 'var(--tourfly-colors-base-850)',
              },
              indicator: {
                backgroundColor: 'var(--tourfly-colors-base-800)',
              },
            })}
            onChange={(v) => dispatch(setImageFilterIsCollect(v))}
          />
          {imageFilterIsCollect && (
            <>
              <IAIMantineSelect
                inputStyle={{ height: '32px' }}
                tooltip="选择分类"
                placeholder="选择分类"
                clearable
                size="xs"
                data={collectionCategory}
                value={imageFilterClassId}
                maxDropdownHeight={280}
                onChange={(v) => dispatch(setImageFilterClassId(v ?? ''))}
              />
              <IAIPopover
                placement="bottom"
                hasArrow
                triggerComponent={
                  <IAIButton
                    h="32px"
                    px="4"
                    tooltipProps={{ placement: 'top', hasArrow: true }}
                    tooltip="选择标签"
                    leftIcon={<FaTags />}
                    size="sm"
                    rounded="base"
                    backgroundColor="base.850"
                    _hover={{
                      backgroundColor: 'base.800',
                    }}
                  >
                    Tags
                  </IAIButton>
                }
              >
                <Flex gap="2" wrap="wrap" maxW="20rem">
                  {collectionTag.map((i) => {
                    if (
                      imageFilterTagIds.indexOf(`${i.value}@@@${i.label}`) >= 0
                    ) {
                      return (
                        <Tag
                          size="sm"
                          key={i.value + i.label}
                          colorScheme="cyan"
                          borderRadius="full"
                          cursor="pointer"
                          onClick={() =>
                            dispatch(
                              setImageFilterTagId(
                                imageFilterTagIds.filter(
                                  (t) => t !== `${i.value}@@@${i.label}`
                                )
                              )
                            )
                          }
                        >
                          <TagLeftIcon boxSize="12px" as={FaCheck} />
                          <TagLabel>{i.label}</TagLabel>
                        </Tag>
                      );
                    } else {
                      return (
                        <Tag
                          cursor="pointer"
                          size="sm"
                          key={i.value + i.label}
                          borderRadius="full"
                          variant="outline"
                          onClick={() =>
                            dispatch(
                              setImageFilterTagId(
                                imageFilterTagIds.concat(
                                  `${i.value}@@@${i.label}`
                                )
                              )
                            )
                          }
                        >
                          {/* <TagLeftIcon boxSize="12px" as={FaPlus} /> */}
                          <TagLabel>{i.label}</TagLabel>
                        </Tag>
                      );
                    }
                  })}
                </Flex>
              </IAIPopover>
            </>
          )}
        </Flex>
        {/* <Flex>
          <Icon
            as={oldFirst ? FaSortAmountDown : FaSortAmountUpAlt}
            cursor="pointer"
            onClick={() => setOldFirst((v) => !v)}
          />
        </Flex> */}
      </Flex>
      <Flex wrap="wrap" gap="2">
        {imageFilterTagIds.map((i, idx) => (
          <Tag
            size="sm"
            key={i + idx}
            colorScheme="cyan"
            borderRadius="full"
            cursor="pointer"
          >
            <TagLeftIcon
              boxSize="12px"
              as={FaTimes}
              onClick={() =>
                dispatch(
                  setImageFilterTagId(imageFilterTagIds.filter((t) => t !== i))
                )
              }
            />
            <TagLabel>{i.split('@@@')[1]}</TagLabel>
          </Tag>
        ))}
      </Flex>
    </Flex>
  );
}
